<template>
    <div width="100%">
        <el-row>
            <el-carousel :interval="4000" type="card" height="200px">
                <el-carousel-item v-for="item in newsPics" :key="item.img">
                    <div @click="imgLink(item.link)" style="width: 100%; height: 100%;padding: 2px;">
                        <el-image :title="item.title" :src="item.img" :fit="imgFitType"
                                  style="width: 100%; height: 100%;"></el-image>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </el-row>

        <el-row style="background: #3a8ee6; height:200px; width: 100%">
            <div id="hotData">
                热点数据
            </div>
        </el-row>

        <el-row style="background: #e14d4d; height:200px; width: 100%">
            <div id="newsCase">
                最新案例
            </div>
        </el-row>
        <el-row style="background: #5daf34; height:200px; width: 100%">
            <div id="mapTools">
                地图工具
            </div>
        </el-row>
    </div>
</template>
<script>

    import menuBar from './menuBar'

    export default {
        components: {
            menuBar
        },
        data() {
            //TODO 初始化Nginx指定图片服务路径下的资源
            return {
                newsPics: [
                    {title: "", img: "../../static/img/indexIMG_1.jpg", link: "What's new one."},
                    {title: "", img: "../../static/img/indexIMG_2.jpg", link: "What's new two."},
                    {title: "", img: "../../static/img/indexIMG_3.jpg", link: "What's new three."},
                    {title: "", img: "../../static/img/indexIMG_4.png", link: "What's new four."}
                ],
                imgFitType: "cover"
            }
        },
        methods: {
            //TODO 首页图片跑马灯跳转至详情页
            imgLink(link) {
                console.log("link to " + link);
            }
        },
        computed: {},
        mounted() {
        }
    }
</script>

<style>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .el-row {
        margin-bottom: 20px;
    }
</style>
